<template>
	<div class="ivu-box">
		<Breadcrumb>
			<BreadcrumbItem>机器管理</BreadcrumbItem>
			<BreadcrumbItem>机器列表</BreadcrumbItem>
		</Breadcrumb>

		<Form ref="formInline" :model="request" inline >
			<FormItem>
				<Input type="text" v-model="request.username_" clearable placeholder="请输入机器名" />
			</FormItem>
	<!-- 		<FormItem>
				<Select  placeholder="请选择机器组"   style="width: 150px;" >
					<Option value="1">机器组1</Option>
					<Option value="2">机器组2</Option>
				</Select>
			</FormItem> -->
		
			<FormItem>
				<Button type="primary"  style="margin-right: 10px">搜索</Button>
				<!-- <Button type="primary" @click="modal1 = true" style="margin-right: 10px">添加机器</Button> -->
				<!-- <Button type="primary" @click="$router.push('/user/add')" style="margin-right: 10px">添加机器</Button> -->
				<!-- <Button v-if="showDel" style="margin-right: 10px" @click="alldel">批量删除</Button> -->
			</FormItem>
		</Form>

		<Table :columns="columns1" :data="tableData" @on-selection-change="selectChange">
			<template slot-scope="{ row }" slot="status">
				<Tag color="success" v-if="row.status == 1" @click.native="setStatus(row.id,2)">启用</Tag>
				<Tag color="error" v-if="row.status == 2" @click.native="setStatus(row.id,1)">禁用</Tag>
			</template>
			<template slot-scope="{ row }" slot="share_url">
				<img :src="row.share_url" v-if="row.share_url" title="点击放大" style="height: 80px;"
					@click="viewImg(row.share_url)"></img>
			</template>
			<template slot-scope="{ row }" slot="user_count">
				<a href="javascript:void(0)" @click="viewSub(row)">{{row.user_count}}</a>
			</template>
			<!-- 			<template slot-scope="{ row }" slot="super">
				<Tag color="error" v-if="row.super == 1">不能</Tag>
				<Tag color="success" v-if="row.super == 2">能</Tag>
			</template> -->

			<template slot-scope="{ row }" slot="option">
				<!-- <Button type="primary" size="small" style="margin-right: 5px" @click="edit(row)">编辑</Button> -->
				<!-- <Button type="error" size="small" style="margin-right: 5px" @click="remove(row)">删除</Button> -->
				<!-- <Button type="success" size="small" style="margin-right: 5px" @click="edituser(row)">设置角色</Button> -->

				<!-- <template v-if="row.role_id == 2">
					<Button type="primary" size="small" ghost style="margin-right: 5px" @click="$router.push('/account/team')">机器</Button>
					<Button type="success" size="small" ghost style="margin-right: 5px">操作员</Button>
				</template> -->


			</template>
		</Table>

		<div style="display: flex;justify-content: center;margin-top: 24px;">
			<Page :total="page.count" :page-size="20" :page-size-opts="[20,30,40,50,100]" show-elevator show-sizer
				show-total @on-change="handleCurrentChange" @on-page-size-change="handleSizeChange" />
		</div>




		<Modal v-model="modal1" :title="form.id ? '编辑机器' : '添加机器'" :loading="modalLoading" :mask-closable="false"
			@on-ok="confirm" @on-cancel="cancel">
			<Form :model="form" :label-width="110">
				<FormItem label="机器名">
					<Input v-model="form.username" placeholder="请输入机器名"></Input>
				</FormItem>
				<FormItem label="机器组">
					<Select clearable v-model="form.real_name" placeholder="请选择" style="width: 120px;">
						<Option value="上级1">机器组1</Option>
						<Option value="上级12">机器组2</Option>
					</Select>
				</FormItem>
<!-- 				<FormItem label="下级机器">
					<CheckboxGroup>
						<Checkbox label="机器1"></Checkbox>
						<Checkbox label="机器2"></Checkbox>
						<Checkbox label="机器3"></Checkbox>
						<Checkbox label="机器4"></Checkbox>
					</CheckboxGroup>
				</FormItem> -->
			</Form>
		</Modal>

		<Modal v-model="modal2" title="查看推广二维码" :mask-closable="false">
			<img :src="codeImg" style="max-width: 100%;" />
		</Modal>

		<Modal v-model="modal3" title="设置角色" @on-ok="confirm2" @on-cancel="cancel2" :mask-closable="false">
			<Form :label-width="110">

				<FormItem label="当前角色">
					<Select clearable v-model="user.role_id" placeholder="请选择" style="width: 120px;">
						<Option v-for="(item, index) in data1" :value="item.id">{{item.title}}</Option>
					</Select>
				</FormItem>

			</Form>
		</Modal>

	</div>
</template>

<script>
	export default {
		data() {
			return {
				width: this.$store.state.width,
				height: this.$store.state.height,
				showDel: false, //批量删除
				type:1,//1admin 2manager 3operator
				loading: false,
				request: {
					username: '',
					phone: '',
					status: '',
					real_name: '',
					p: 1
				},
				codeImg: '',
				modal2: false,
				modal3: false,
				columns1: [
					// {
					// 	width: 60,
					// 	align: "center",
					// 	type: 'selection'
					// },

					{
						title: "机器名",
						key: "role_name",
						minWidth: 150,
						align: "center"
					},
					{
						title: "机器组经理",
						key: "real_name",
						minWidth: 150,
						align: "center"
					},
					{
						title: "机器组",
						key: "td",
						minWidth: 150,
						align: "center"
					},
					// {
					// 	title: "操作员",
					// 	key: "name",
					// 	minWidth: 150,
					// 	align: "center"
					// },
					{
						title: "状态",
						slot: "status",
						minWidth: 150,
						align: "center"
					},
					{
						title: "创建时间",
						key: "create_time",
						minWidth: 150,
						align: "center"
					},

					{
						title: "操作",
						slot: "option",
						minWidth: 150,
						align: "center",
						fixed: 'right',
					}
				],
				tableData: [],
				page: {},
				modalLoading: true,
				modal1: false,
				form: {
					id: "",
					username: "",
					// password: "",
					real_name: "",
					phone: "",
					super: '',
					role_id: ''
				},
				user: {
					uid: '',
					role_id: ''
				},
				data1: [],
				selectID: [],
				content: '权限1;权限2;权限3;权限4;权限5;权限6;权限7;权限8'
			};
		},
		created() {
			if(this.$route.query.name){
				this.request.username = this.$route.query.name
			}
			if(this.$route.query.type){
				this.type = this.$route.query.type
			}
			
			this.lists();
			this.getUserlist();
		},
		methods: {
			alldel() {
				//批量删除
				this.$Modal.confirm({
					title: "确定要删除这些机器？",
					onOk: () => {
						// this.$Message.success("删除成功");
						this.$Message.success('批量删除id:' + JSON.stringify(this.selectID));
					},
					onCancel: () => {}
				});


			},
			selectChange(selection) {
				console.log('选项发生改变', selection)
				this.selectID = [];
				selection.forEach(item => {
					this.selectID.push(item.id)
				})

				if (this.selectID.length > 0) {
					this.showDel = true
				} else {
					this.showDel = false
				}

				console.log(this.selectID)


			},

			edituser(row) {
				this.user.uid = row.id;
				this.user.role_id = row.role_id;

				console.log(this.user)

				this.modal3 = true;
			},
			confirm2() {
				console.log(this.user)
				this.modal3 = false;
				this.$Message.success("保存成功！");
				this.lists();
				this.cancel2();

			},
			cancel2() {
				this.user = {
					uid: '',
					role_id: ''
				}
			},
			getUserlist() {
				this.data1 = [{
						"id": "1",
						"title": "administrator",
						"status": "1",
						"createtime": "1970-01-01 08:33:38",
						"remarks": "测试"
					},
					{
						"id": "28",
						"title": "测试1",
						"status": "1",
						"createtime": "2020-11-23 19:22:56",
						"remarks": null
					}
				]
			},
			viewImg(img) {
				this.codeImg = img;
				this.modal2 = true;
			},
			viewSub(row) {
				console.log(row.id)
				this.$Message.success("id:", row.id);
				// this.$router.push('/master/index?account_id=' + row.id);
			},
			search() {
				this.request.p = 1;
				this.lists();
			},
			handleSizeChange(val) {
				this.request.p = 1;
				this.request.pagerows = val;
				this.lists();
			},
			handleCurrentChange(val) {
				this.request.p = val;
				this.lists();
			},
			lists() {
				this.loading = true;

				this.tableData = [{
					"id": "21",
					"role_name": "机器1",
					"username": "wgh8",
					"phone": "18515286366",
					"status": "1",
					"real_name": "manager",
					"name":'我',
					"td":'机器组1',
					"create_time": "2020-08-25 15:53:33",
					"code": "91529472",
					"user_count": "0",
					"role_id": "1",
					"share_url": "http://www.vshop88.net/code/code.php?url=http://local.kaka.com/index.php/masters/share/register?code=91529472&size=10&margin=0"
				}, {
					"id": "22",
					"role_name": "机器2",
					"username": "wgh8",
					"phone": "18515286366",
					"status": "1",
					"td":'机器组2',
					"name":'我',
					"real_name": "manager",
					"create_time": "2020-08-25 15:53:33",
					"code": "91529472",
					"user_count": "0",
					"role_id": "2",
					"share_url": "http://www.vshop88.net/code/code.php?url=http://local.kaka.com/index.php/masters/share/register?code=91529472&size=10&margin=0"
				}]

				this.page.count = 1; // 总条数
				this.page.curPage = 1; // 当前页
				this.page.countPage = 1; // 总页数

			},
			edit(row) {
				this.form.id = row.id;
				this.form.username = row.username;
				this.form.real_name = row.real_name;
				this.form.phone = row.phone;
				this.form.super = row.super;
				this.modal1 = true;
			},
			confirm() {
				this.modal1 = false;
				this.$Message.success("保存成功！");
				this.lists();

				this.cancel();
			},
			remove(row) {
				this.$Modal.confirm({
					title: "确定要删除此机器吗？",
					onOk: () => {
						this.$Message.success("删除成功");
						this.lists();
					},
					onCancel: () => {}
				});
			},
			setStatus(id, status) {
				var text = "确定要" + (status == 1 ? "启用" : "禁用") + "此机器吗？";
				this.$Modal.confirm({
					title: text,
					onOk: () => {
						this.$Message.success("操作成功");
						this.lists();
					},
					onCancel: () => {}
				});
			},
			cancel() {
				this.form = {
					id: "",
					username: "",
					password: "",
					real_name: "",
					phone: "",
					super: '',
					role_id: ''
				};
			}
		}
	};
</script>

<style scoped>
	.spec_item {
		display: flex;
		align-items: center;
		margin-bottom: 10px;
	}

	.spec_item .input {
		width: 200px;
	}

	.spec_item button {
		margin-left: 10px;
	}
</style>
